Frontend kódszétválasztás: Útvonal-alapú és komponens-alapú

// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
 return (
 
 Loading...

Ebben a példában a Home és About komponensek lusta betöltéssel kerülnek betöltésre a React.lazy() és dinamikus importok segítségével. A Suspense komponens tartalék felhasználói felületet biztosít, amíg a komponensek betöltődnek. A React Router kezeli a navigációt, és biztosítja, hogy a megfelelő komponens kerüljön renderelésre az aktuális útvonal alapján.

Példa (Angular)

Az Angularban az útvonal-alapú kódszétválasztás lusta betöltésű modulok segítségével valósul meg.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
 { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
 { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Itt az útvonalkonfigurációban található loadChildren tulajdonság adja meg a modul elérési útját, amelyet lusta betöltéssel kell betölteni. Az Angular útválasztója automatikusan betölti a modult és a hozzá tartozó komponenseket, csak akkor, ha a felhasználó a megfelelő útvonalra navigál.

Példa (Vue.js)

A Vue.js is támogatja az útvonal-alapú kódszétválasztást a router konfigurációjában található dinamikus importok segítségével.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
 { path: '/', component: () => import('./components/Home.vue') },
 { path: '/about', component: () => import('./components/About.vue') }
];

const router = new VueRouter({
 routes
});

export default router;

Az útvonalkonfigurációban található component opció dinamikus importot használ a komponens aszinkron betöltésére. A Vue Router kezeli a komponens betöltését és renderelését, amikor az útvonalat elérik.

Az útvonal-alapú kódszétválasztás előnyei

• Egyszerűen megvalósítható: Az útvonal-alapú kódszétválasztás viszonylag egyszerűen megvalósítható, különösen a modern keretrendszerek által nyújtott támogatással.
• Tisztán elkülönített felelősségi körök: Minden útvonal az alkalmazás különálló szakaszát jelöli, ami megkönnyíti a kód és annak függőségeinek értelmezését.
• Hatékony nagy alkalmazásokhoz: Az útvonal-alapú kódszétválasztás különösen előnyös nagy alkalmazások esetén, amelyek sok útvonallal és funkcióval rendelkeznek.

Az útvonal-alapú kódszétválasztás hátrányai

• Lehet, hogy nem elég részletes: Az útvonal-alapú kódszétválasztás nem biztos, hogy elegendő olyan alkalmazásokhoz, amelyek több útvonalon megosztott, komplex komponensekkel rendelkeznek.
• A kezdeti betöltési idő továbbra is magas lehet: Ha egy útvonal sok függőséget tartalmaz, az adott útvonal kezdeti betöltési ideje továbbra is jelentős lehet.

Komponens-alapú kódszétválasztás

A komponens-alapú kódszétválasztás egy lépéssel tovább viszi a kódszétválasztást azáltal, hogy az alkalmazáskódot az egyes komponensek alapján kisebb részekre osztja. Ez a megközelítés részletesebb vezérlést tesz lehetővé a kód betöltése felett, és különösen hatékony lehet komplex felhasználói felülettel és újrafelhasználható komponensekkel rendelkező alkalmazások számára.

Megvalósítás

A komponens-alapú kódszétválasztás szintén dinamikus importokra támaszkodik, de egész útvonalak betöltése helyett az egyes komponensek igény szerint töltődnek be. Ez az alábbi technikákkal érhető el:

1. Komponensek lusta betöltése: Használjon dinamikus importokat a komponensek betöltésére csak akkor, amikor szükség van rájuk, például amikor először renderelődnek, vagy amikor egy specifikus esemény történik.
2. Feltételes renderelés: Rendereljen komponenseket feltételesen, felhasználói interakció vagy egyéb tényezők alapján, csak akkor töltve be a komponens kódot, ha a feltétel teljesül.
3. Intersection Observer API: Használja az Intersection Observer API-t annak észlelésére, hogy egy komponens láthatóvá vált-e a nézetablakban, és ennek megfelelően töltse be a kódját. Ez különösen hasznos az eredetileg képernyőn kívüli komponensek betöltéséhez.

Példa (React)

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
 return (
 

 Loading...
}>